<template>
  <el-dialog title="货道设置" width="940px" :visible="isShow" @close="closeFn">
    <div class="title">
      <div class="left">
        <span>货道行数：{{ typeNow.vmRow }}</span>
        <span>货道列数：{{ typeNow.vmCol }}</span>
        <span>货道容量（个）：{{ typeNow.channelMaxCapacity }}</span>
      </div>
      <el-button type="primary" class="title-btn" @click="autoSupply"
        >智能排货</el-button
      >
    </div>
    <div class="goodslist" v-loading="loading">
      <el-carousel
        :autoplay="false"
        :loop="false"
        indicator-position="none"
        arrow="always"
      >
        <el-carousel-item v-for="(element, index) in goodsNow" :key="index">
          <div style="height: 300px; overflow-y: auto">
            <el-scrollbar>
              <el-row>
                <el-col
                  :span="4.5"
                  v-for="item in element"
                  :key="item.channelId"
                >
                  <div class="card" v-if="item.sku">
                    <div class="label">{{ item.channelCode }}</div>
                    <div class="pic">
                      <img :src="item.sku.skuImage" alt="" />
                      <span>{{ item.sku.skuName }}</span>
                    </div>
                    <div class="setting">
                      <el-button type="text" class="card-btn" @click="addGoods(item)"
                        >添加</el-button
                      >
                      <el-button
                        type="text"
                        class="card-btn"
                        style="color: red"
                        @click="delFn(item)"
                        >删除</el-button
                      >
                    </div>
                  </div>
                  <div class="card" v-else>
                    <div class="label">{{ item.channelCode }}</div>
                    <div class="pic">
                      <img src="../../../assets/下载.png" alt="" />
                      <span>暂无商品</span>
                    </div>
                    <div class="setting">
                      <el-button type="text" class="card-btn" @click="addGoods(item)">添加</el-button>
                      <el-button
                        type="text" 
                        class="card-btn"
                        disabled
                        style="color: #ffdada"
                        >删除</el-button
                      >
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-scrollbar>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <el-row type="flex" justify="center">
      <el-col :span="3"><el-button class="cofirm-btn" @click="finalConfirm">确认</el-button></el-col>
    </el-row>
    <!-- 智能排货弹窗 -->
    <el-dialog
      width="55%"
      title="智能排货"
      :visible.sync="supplyVisible"
      append-to-body
    >
      <div>该区域属于{{ bsName }}商圈，适合销售以下商品：</div>
      <el-row>
        <el-col :span="4.5" v-for="item in topRank" :key="item.skuId">
          <div class="innner-card">
            <img :src="item.image" alt="" />
            <span>{{ item.skuName }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="4">
          <el-button class="cofirm-btn" @click="getAdvice"
            >采纳建议</el-button
          >
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 添加商品弹窗 -->
    <el-dialog
      width="60%"
      title="选择商品"
      :visible.sync="addVisible"
      append-to-body
    >
      <div class="search">
        <el-form class="search-form">
          <el-form-item label="商品名称：" label-width="100px">
            <el-input
              v-model="pageParams.skuName"
              placeholder="请输入"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              class="search-btn"
              size="mini"
              type="primary"
              icon="el-icon-search"
              @click="searchGoods"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="container">
        <i class="el-icon-arrow-left" @click="prev" />
       <div class="list">
         <el-row>
          <el-col :span="4.5" v-for="(item,index) in chooseList" :key="index">
            <div class="innner-card" @click="innerSkuId = item.skuId">
              <div class="label" v-show="innerSkuId === item.skuId">
                <img src="../../../assets/selected.png" alt="" />
              </div>
              <img :src="item.skuImage" alt="" />
              <span>{{ item.skuName }}</span>
            </div>
          </el-col>
        </el-row>
       </div>
        <i class="el-icon-arrow-right" @click="next" />
      </div>
      <el-row type="flex" justify="center">
        <el-col :span="4">
          <el-button class="cofirm-btn" @click="addFn"
            >确认</el-button
          >
        </el-col>
      </el-row>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { getCurrentBsNameApi, getSalesTopApi, searchGoodsApi, getVmGoodsApi, getVmTypeInfoApi, channelConfigApi } from "@/api/vm";
export default {
  props: {
    isShow: Boolean,
    businessId: Number,
    innerCode:String
  },
  data() {
    return {
      bsName: "",
      supplyVisible: false,
      addVisible: false,
      topRank: [],
      loading:true,
      channelCode:'',
      typeNow:{},
      goodsNow:[],
      originData:[],
      innerSkuId: "",
      chooseList: [],
      chosenOne:{},
      pageParams: {
        pageIndex: 1,
        pageSize: 10,
        skuName: "",
      },
    };
  },
  created() {
  },
  methods: {
    async getGoodsDetail(id){
      this.originData = await getVmGoodsApi(id)
      this.loading = false
      const leftrows = this.originData.filter(item=>{return item.channelCode.slice(2) % 10 <= 5 && item.channelCode.slice(2) % 10 !== 0})
      const rightrows = this.originData.filter(item=>{return item.channelCode.slice(2) % 10 > 5 || item.channelCode.slice(2) % 10 === 0})
      rightrows ? this.goodsNow = [leftrows, rightrows] : this.goodsNow = [leftrows]
    },
    async getVmType(type){
      this.typeNow = await getVmTypeInfoApi(type)
    },
    async autoSupply() {
      this.bsName = await getCurrentBsNameApi(this.businessId);
      this.topRank = await getSalesTopApi(this.businessId);
      console.log(this.topRank);
      this.topRank.forEach(item => {
        this.$set(item, 'skuImage', item.image)
      })
      this.supplyVisible = true;
    },
    async searchGoods() {
      const res = await searchGoodsApi(this.pageParams);
      this.chooseList = res.currentPageRecords;
    },
    async addGoods(item) {
      const res = await searchGoodsApi(this.pageParams);
      this.chooseList = res.currentPageRecords;
      this.channelCode = item.channelCode;
      this.addVisible = true;
    },
    addFn(){
      const wantedOne = this.chooseList.find(item=>{return item.skuId === this.innerSkuId})
      const needToReplace = this.originData.find(item=>{return item.channelCode === this.channelCode})
      needToReplace.sku = wantedOne
      needToReplace.skuId = wantedOne.skuId 
      this.addVisible = false
    },
    delFn(item){
      item.sku = null,
      item.skuId = 0
    },
    getAdvice(){
      for(let i = 0; i < this.topRank.length; i++){
        this.originData[i].sku = this.topRank[i]
        this.originData[i].skuId = this.topRank[i].skuId
      }
      this.supplyVisible = false
    },
    async finalConfirm(){
      const submit = this.originData.map(item => {return{channelCode:item.channelCode,skuId:item.skuId}})
      await channelConfigApi({channelList:submit,innerCode:this.innerCode})
      this.$message.success('货道配置成功')
      this.closeFn()
    },
    prev(){
      if(this.pageParams.pageIndex > 1){
        this.pageParams.pageIndex--
        this.searchGoods()
      }
    },
    next(){
      if(this.chooseList.length){
        this.pageParams.pageIndex++
        this.searchGoods()
      } else {
        this.pageParams.pageIndex--
        this.searchGoods()
      }
    },
    closeFn() {
      this.$emit("update:isShow", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  margin: 0 auto;
  width: 847px;
  height: 56px;
  background-color: #f3f6fb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    align-items: center;
    span {
      margin-left: 50px;
    }
  }
  .title-btn {
    width: 80px;
    height: 36px;
    background-color: #5f84ff;
    text-align: center;
    padding: 0;
    border: none;
    margin-right: 22px;
  }
}
.el-carousel__item h3 {
  color: #fff;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item {
  background-color: #fff;
  padding: 10px 27px;
}
.card {
  width: 150px;
  height: 180px;
  position: relative;
  margin-right: 15px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 6%);
  .label {
    position: absolute;
    left: 0;
    top: 10px;
    width: 43px;
    height: 23px;
    background-color: #829bed;
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 23px;
    border-radius: 0 10px 10px 0;
  }
  .pic {
    width: 150px;
    height: 135px;
    background-color: #f6f7fb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    img {
      width: 84px;
      height: 78px;
      margin-bottom: 15px;
    }
  }
  .setting {
    display: flex;
    justify-content: center;
    width: 150px;
    height: 45px;
    background-color: #fff;
    .card-btn {
      font-size: 14px;
    }
  }
}
.cofirm-btn {
  background-color: #ff6d29;
  color: #fff;
  margin-top: 20px;
}
.innner-card {
  position: relative;
  width: 134px;
  height: 134px;
  background-color: #f6f7fb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  margin-top: 15px;
  border-radius: 5px;
  .label {
    position: absolute;
    top: 0;
    left: 0;
    img {
      width: 36px;
      height: 36px;
    }
  }
  img {
    width: 84px;
    height: 78px;
    margin-bottom: 15px;
  }
  // margin-right: 15px;
}
.search {
  background-color: #fff;
  display: flex;
  height: 64px;
  align-items: center;
  padding-top: 23px;
  margin-bottom: 20px;
  .search-form {
    display: flex;
    align-items: center;
    .search-btn {
      background-color: #5f84ff;
      margin-left: 15px;
      font-size: 16px;
      height: 36px;
      width: 80px;
      text-align: center;
      padding: 0;
    }
  }
}
.container{
  display: flex;
  position: relative;
  .list{
    padding-left: 45px;
  }
}
.el-icon-arrow-left {
  position: absolute;
  top: 50%;
  z-index: 1;
  font-size: 35px;
  cursor: pointer;
}
.el-icon-arrow-right {
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 1;
  font-size: 35px;
  cursor: pointer;
}
</style>
